package com.fiberhome.nas.feature.main.view

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyGridState
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.items
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
import coil.compose.AsyncImage
import com.fiberhome.nas.core.designsystem.theme.AppTheme
import com.fiberhome.nas.core.designsystem.theme.BgGreyLight
import com.fiberhome.nas.core.designsystem.theme.BodyLarge
import com.fiberhome.nas.core.designsystem.theme.BodyMedium
import com.fiberhome.nas.core.designsystem.theme.ShapeMedium
import com.fiberhome.nas.core.designsystem.theme.SpacePaddingLarge
import com.fiberhome.nas.core.designsystem.theme.SpacePaddingSmall
import com.fiberhome.nas.core.designsystem.theme.SpaceVerticalSmall
import com.fiberhome.nas.core.designsystem.theme.SpaceVerticalXSmall
import com.fiberhome.nas.core.model.entity.AlbumInfo
import com.fiberhome.nas.core.model.preview.previewDeviceAlbums
import com.fiberhome.nas.core.ui.component.text.AppText
import com.fiberhome.nas.feature.main.viewmodel.AlbumViewModel

@Composable
fun AlbumRoute(
    gridState: LazyGridState,
    viewModel: AlbumViewModel = hiltViewModel(),
) {
    val albums by viewModel.albums.collectAsState()

    AlbumScreen(
        gridState = gridState,
        albums = albums,
        onAlbumClick = viewModel::onAlbumClick,
        getAlbumThumbUrl = viewModel::getAlbumThumbUrl
    )
}

@Composable
fun AlbumScreen(
    gridState: LazyGridState = LazyGridState(),
    albums: List<AlbumInfo>,
    onAlbumClick: (AlbumInfo) -> Unit = {},
    getAlbumThumbUrl: (String) -> String = { _ -> "" },
) {
    Box {
        LazyVerticalGrid(
            state = gridState,
            columns = GridCells.Fixed(2),
            modifier = Modifier.fillMaxSize(),
            horizontalArrangement = Arrangement.spacedBy(SpacePaddingSmall),
            verticalArrangement = Arrangement.spacedBy(SpacePaddingSmall),
            contentPadding = PaddingValues(
                SpacePaddingLarge,
                SpacePaddingLarge,
                SpacePaddingLarge,
                100.dp
            ),
        ) {
            items(albums) {
                AlbumItem(
                    album = it,
                    modifier = Modifier.clickable { onAlbumClick(it) },
                    getAlbumThumbUrl = getAlbumThumbUrl
                )
            }
        }
    }


}

// 单个相册项
@Composable
fun AlbumItem(
    modifier: Modifier = Modifier,
    album: AlbumInfo,
    getAlbumThumbUrl: (String) -> String
) {
    Box(
        modifier = modifier
            .aspectRatio(1f) // 1:1 宽高比例
            .clip(ShapeMedium)
    ) {
        AsyncImage(
            model = getAlbumThumbUrl(album.albumThumbnailAssetId),
            contentDescription = "相册",
            modifier = Modifier
                .matchParentSize()
        )

//        if (album.getAlbumType() == AlbumType.ALL) {
//            Image(
//                painter = painterResource(id = R.drawable.ic_github),
//                contentDescription = album.albumName,
//                contentScale = ContentScale.Crop,
//                modifier = Modifier.fillMaxSize()
//            )
//        } else {
//            // 其他相册可以使用默认占位图
//            Box(modifier = Modifier.fillMaxSize()) {
//                Image(
//                    painter = painterResource(id = com.fiberhome.nas.core.ui.R.drawable.ic_empty_data),
//                    contentDescription = album.albumName,
//                    contentScale = ContentScale.Crop,
//                    modifier = Modifier.fillMaxSize()
//                )
//            }
//        }

        Column(
            modifier = Modifier
                .fillMaxWidth()
                .align(Alignment.BottomCenter)
                .background(BgGreyLight)
                .padding(SpaceVerticalSmall) //TODO 注意 padding放在background上面和下面，效果不一样
        ) {
            AppText(
                text = album.albumName,
                style = BodyLarge,
                maxLines = 1,
                overflow = TextOverflow.Ellipsis,
            )
            SpaceVerticalXSmall()
            AppText(
                text = "${album.assetCount} 项",
                style = BodyMedium,
            )
        }

    }
}

@Preview(showBackground = true)
@Composable
fun AlbumScreenPreview() {
    AppTheme {
        AlbumScreen(albums = previewDeviceAlbums)
    }
}

